﻿@using thousandClear.Areas.Admin.Models;
@model List<ProjectModel>
<div id="app">
    <div class="ui-flex ui-box font-center bg-white"  style="padding: 10px 0px;">
        <div class="col20">
            <span style="color: white;">返回</span>
        </div>
        <div class="col60 font-16">
            <span>单项千净</span>
        </div>
        <div class="col20">

        </div>
    </div>
    <div class="ui-flex" v-if="showGood">

        <div class="ui-flex ui-box" style="padding: 20px 0px;">
            <img src="~/Statics/Images/shop/main/welcome3.png" style="width: 80%; margin-left: 10%;" />
        </div>

        <div class="ui-flex ui-box font-red" style="padding: 0px 5px;">
            *请勾选您所需要的项目
        </div>
        <table class="ui-flex ui-box" style="padding: 0 10px;">
            <tbody>
                <tr class="ui-flex bg-blue font-center font-black font-18">
                    <td>
                        项目
                    </td>
                    <td>
                        项目详情
                    </td>
                    <td>价格</td>
                    <td></td>
                </tr>
                @foreach (ProjectModel item in Model)
                {

                    if (item.DIMID != 27&& item.DIMID != 25 && item.DIMID != 28)
                    {
                        <tr class="ui-flex bg-white font-black ">
                            <td class="font-12 " style="border-top: none; border-right: none; width: 20%;">
                                <span>@item.dimName</span>
                            </td>
                            <td class="font-12 " style="border-top: none; border-right: none;">
                                <span class="font-wrap">@item.dimDesc</span>
                            </td>
                            <td class="font-12" style="border-top: none; border-right: none; width: 20%;">
                                <span>￥@item.dimTotalRate .00</span>
                            </td>
                            <td class="" style="border-top: none;">
                                <span data-id="@item.DIMID" data-price="@item.dimTotalRate" class="icon-true1"></span>
                            </td>
                        </tr>
                    }
                    if (item.DIMID == 25)
                    {
                        <tr class="ui-flex bg-white font-black ">
                            <td class="font-12 " style="border-top: none; border-right: none; width: 20%;">
                                <span>@item.dimName</span>
                            </td>
                            <td class="font-12 " style="border-top: none; border-right: none;">
                                <span class="font-wrap">@item.dimDesc </span>
                            </td>
                            <td class="font-12" style="border-top: none; border-right: none; width: 20%;">
                                <span>￥@item.dimTotalRate .00 /出风口</span>
                            </td>
                            <td style="border-top: none;">
                                <span data-id="@item.DIMID" data-price="@item.dimTotalRate" class="icon-true1"></span>
                            </td>
                        </tr>
                    }
                    if (item.DIMID == 27)
                    {
                        <tr class="ui-flex bg-white font-black ">
                            <td class="font-12 " style="border-top: none; border-right: none; width: 20%;">
                                <span>@item.dimName</span>
                            </td>
                            <td class="font-12 " style="border-top: none; border-right: none;">
                                <span class="font-wrap">@item.dimDesc </span>
                            </td>
                            <td class="font-12" style="border-top: none; border-right: none; width: 20%;">
                                <span>￥@item.dimTotalRate .00 m<sup>2</sup></span>
                            </td>
                            <td style="border-top: none;">
                                <span data-id="@item.DIMID" data-price="@item.dimTotalRate" class="icon-true1"></span>
                            </td>
                        </tr>
                    }
                    if (item.DIMID == 28)
                    {
                        <tr class="ui-flex bg-white font-black ">
                            <td class="font-12 " style="border-top: none; border-right: none; width: 20%;">
                                <span>@item.dimName</span>
                            </td>
                            <td class="font-12 " style="border-top: none; border-right: none;">
                                <span class="font-wrap">@item.dimDesc </span>
                            </td>
                            <td class="font-12" style="border-top: none; border-right: none; width: 20%;">
                                <span>￥@item.dimTotalRate .00 /台</span>
                            </td>
                            <td style="border-top: none;">
                                <span data-id="@item.DIMID" data-price="@item.dimTotalRate" class="icon-true1"></span>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
        <div v-if="showMoel" class="font-blue" style="position: fixed; width: 100%; height: 100%; left: 0; z-index:100; top: 0; background: gray;">
            <div style="position: absolute; width: 80%; height: 250px; left: 10%; z-index:1000; top: 100px; background: white; border-radius: 5px;">
                <div class="ui-flex font-16" style="margin: 10px 20px;">
                    <label>输入房屋面积m<sup>2</sup>:</label>
                </div>
                <input type="tel" onchange="changePrice()" v-model="area" style="margin-left: 60px; border:1px solid #6cc9Eb;" />
                <div class="ui-flex font-16" style="margin: 10px 20px;">
                    <label>价格为￥:</label>
                </div>
                <input type="tel" min="0" v-model="areaPrice" disabled="disabled" style="margin-left: 60px; border:1px solid #6cc9Eb;" />
                <div class="ui-flex" style="margin-top: 20px;">
                    <a class="bg-blue col40 font-white btn font-center" v-on:tap="CheckArea" style="display: block; margin-left: 5%;  border-radius: 5px; padding: 10px 0px;">确定</a>
                    <a class="bg-blue col40 font-white btn font-center" v-on:tap="CancelArea" style="display: block; margin-left: 10%;  border-radius: 5px; padding: 10px 0px;">取消</a>
                </div>
            </div>
        </div>
        <div v-if="showMoel2" class="font-blue" style="position: fixed; width: 100%; height: 100%; left: 0; z-index:100; top: 0; background: gray;">
            <div style="position: absolute; width: 80%; height: 250px; left: 10%; z-index:1000; top: 100px; background: white; border-radius: 5px;">
                <div class="ui-flex font-16" style="margin: 10px 20px;">
                    <label>输入出风口个数/个:</label>
                </div>
                <input type="tel" onchange="changeNum()" v-model="Num" style="margin-left: 60px; border:1px solid #6cc9Eb;" />
                <div class="ui-flex font-16" style="margin: 10px 20px;">
                    <label>价格为￥:</label>
                </div>
                <input type="tel" min="0" v-model="NumPrice" disabled="disabled" style="margin-left: 60px; border:1px solid #6cc9Eb;" />
                <div class="ui-flex" style="margin-top: 20px;">
                    <a class="bg-blue col40 font-white btn font-center" v-on:tap="CheckNum" style="display: block; margin-left: 5%;  border-radius: 5px; padding: 10px 0px;">确定</a>
                    <a class="bg-blue col40 font-white btn font-center" v-on:tap="CancelNum" style="display: block; margin-left: 10%;  border-radius: 5px; padding: 10px 0px;">取消</a>
                </div>
            </div>
        </div>
        <div v-if="showMoel3" class="font-blue" style="position: fixed; width: 100%; height: 100%; left: 0; z-index:100; top: 0; background: gray;">
            <div style="position: absolute; width: 80%; height: 250px; left: 10%; z-index:1000; top: 100px; background: white; border-radius: 5px;">
                <div class="ui-flex font-16" style="margin: 10px 20px;">
                    <label>请输入空调台数/台:</label>
                </div>
                <input type="tel" onchange="changeNum2()" v-model="Num2" style="margin-left: 60px; border:1px solid #6cc9Eb;" />
                <div class="ui-flex font-16" style="margin: 10px 20px;">
                    <label>价格为￥:</label>
                </div>
                <input type="tel" min="0" v-model="NumPrice2" disabled="disabled" style="margin-left: 60px; border:1px solid #6cc9Eb;" />
                <div class="ui-flex" style="margin-top: 20px;">
                    <a class="bg-blue col40 font-white btn font-center" v-on:tap="CheckNum2" style="display: block; margin-left: 5%;  border-radius: 5px; padding: 10px 0px;">确定</a>
                    <a class="bg-blue col40 font-white btn font-center" v-on:tap="CancelNum2" style="display: block; margin-left: 10%;  border-radius: 5px; padding: 10px 0px;">取消</a>
                </div>
            </div>
        </div>

        <div v-on:tap="BuyCofime" class="ui-flex bg-blue font-16 font-white font-center ui-box" style="position: fixed; bottom: 0; left: 0; height: 40px; line-height: 40px"><span>单项千净￥{{{price}}}.00</span></div>
    </div>
    <div class="ui-flex ui-box" v-if="showif" style="padding: 10px;">
        <img class="ui-flex" src="~/Statics/Images/shop/main/hetong.jpg" />
        <a class="bg-blue font-white btn font-center" v-on:tap="goBuy" style="width:60%;display: block; margin-left: 20%; border-radius: 5px; padding: 10px 0px;">我接受</a>
    </div>
    <div st></div>
    <div class="ui-flex" style="height: 50px;"></div>
    <div>
        <form id="form" method="post" action="">
            <input type="hidden" v-bind:value="data" name="data" />
        </form>
    </div>

    <input type="hidden" value="@ViewBag.OpenId" id="hiddOpenId" />
    <input type="hidden" value="@ViewBag.Levels" id="hiddLevels" />

</div>



@section Styles{
    @Styles.Render("~/cssbundles/consumer/subscribe")

}

@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script>
        var model = new Vue({
            el: '#app',
            data: {
                price: 0,
                OpenId: '@ViewBag.OpenId',
                selectModel: [],
                stringSelectModel: "",
                showGood: true,
                showif: false,
                showMoel: false,
                area: '0',
                areaPrice: '0',
                truePrice: '0',
                showMoel2: false,
                Num: '0',
                NumPrice: '0',
                trueNumPrice: '0',
                showMoel3: false,
                Num2: '0',
                NumPrice2: '0',
                trueNumPrice2: '0',
            },
            computed: {
                data: function () {
                    return JSON.stringify(this._data);
                }
            },
            methods: {
                back: function () {
                    window.location.href = "../Main/Common?openid=@ViewBag.OpenId";
                },
                goBuy: function () {
                    $("#form").submit();
                },
                BuyCofime: function () {
                   
                    if (this.selectModel.length < 1) {
                        alert("请勾选项目");
                        return;
                    }
                    this.showGood = false;
                    this.showif = true;

                },
                CheckNum: function () {
                    var self = this;
                    var item = this.selectModel;
                    console.log(model._data.price);
                    var i = jQuery.inArray("25", item);
                    var $span = $("span[data-id='25']");
                    if (this.Num== 0) {
                        this.CancelNum();
                        return;
                    }

                    self.showMoel2 = false;
                    if (i == "-1") {
                        this._data.selectModel.push("25");
                    }
                    //减去上次勾选价格
                    self.price -= self.trueNumPrice;
                    //self.price -= $span.attr("data-price");
                    console.log(this.Num)
                    //增加本次勾选价格
                    self.price += parseInt($span.attr("data-price") * this.Num);
                    //缓存本次勾选价格
                    self.trueNumPrice = parseInt($span.attr("data-price") * this.Num);
                    //修改主页面标记
                    $span.removeClass("icon-true1");
                    $span.addClass("icon-true");
                    console.log(model._data.price);
                },
                CancelNum: function () {
                    var self = this;
                    var item = this.selectModel;
                    var i = jQuery.inArray("25", item);
                    var $span = $("span[data-id='25']");

                    self.showMoel2 = false;
                    console.log(i)
                    //if (i != -1) {
                    //减去上次勾选价格
                        self.selectModel.splice($.inArray("25", self.selectModel), 1);
                        self.price -= self.trueNumPrice;
                    //}
                    //修改主页面标记
                    $span.removeClass("icon-true");
                    $span.addClass("icon-true1");
                    self.NumPrice = 0;
                    self.Num = 0;
                    self.trueNumPrice = 0;


                },
                CheckNum2: function () {
                    var self = this;
                    var item = this.selectModel;

                    var i = jQuery.inArray("28", item);
                    var $span = $("span[data-id='28']");
                    if (this.Num2 == 0) {
                        this.CancelNum2();
                        return;
                    }

                    self.showMoel3 = false;
                    if (i == "-1") {
                        this._data.selectModel.push("28");
                    }
                    //减去上次勾选价格
                    self.price -= self.trueNumPrice2;
                    //增加本次勾选价格
                    self.price += parseInt($span.attr("data-price") * this.Num2);
                    //缓存本次勾选价格
                    self.trueNumPrice2 = parseInt($span.attr("data-price") * this.Num2);
                    //修改主页面标记
                    $span.removeClass("icon-true1");
                    $span.addClass("icon-true");
                },
                CancelNum2: function () {
                    var self = this;
                    var item = this.selectModel;
                    var i = jQuery.inArray("28", item);
                    var $span = $("span[data-id='28']");

                    self.showMoel3 = false;
                    //if (i != -1) {
                        self.selectModel.splice($.inArray("28", self.selectModel), 1);
                        self.price -= self.trueNumPrice2;
                    //}

                    $span.removeClass("icon-true");
                    $span.addClass("icon-true1");
                    self.NumPrice2 = 0;
                    self.Num2 = 0;
                    self.trueNumPrice2 = 0;


                },
                CheckArea: function () {
                    var self = this;
                    var item = this.selectModel;
                    var i = jQuery.inArray("27", item);
                    var $span = $("span[data-id='27']");
                    if (this.area==0) {
                        this.CancelArea();
                        return;
                    }

                    self.showMoel = false;
                    if (i == "-1") {
                        this._data.selectModel.push("27");
                    }
                    self.price -= self.truePrice;

                    self.price += parseInt($span.attr("data-price") * this.area);
                    self.truePrice = parseInt($span.attr("data-price") * this.area);
                    $span.removeClass("icon-true1");
                    $span.addClass("icon-true");
                },
                CancelArea: function () {
                    var self = this;
                    var item = this.selectModel;
                    var i = jQuery.inArray("27", item);
                    var $span = $("span[data-id='27']");

                    self.showMoel = false;
                    //if (i != -1) {
                        self.selectModel.splice($.inArray("27", self.selectModel), 1);
                        self.price -= self.truePrice;
                    //}

                    $span.removeClass("icon-true");
                    $span.addClass("icon-true1");
                    self.areaPrice = 0;
                    self.area = 0;
                    self.truePrice = 0;

                }

            }

        })
        function changePrice() {
            var $span = $("span[data-id='27']");
            model._data.areaPrice = parseInt($span.attr("data-price") * model._data.area);   
        }
        function changeNum() {
            var $span = $("span[data-id='25']");
            model._data.NumPrice = parseInt($span.attr("data-price") * model._data.Num);
        }
        function changeNum2() {
            var $span = $("span[data-id='28']");
            model._data.NumPrice2 = parseInt($span.attr("data-price") * model._data.Num2);
        }

        var selectItem = new Array();

        $(function () {
            $("span[data-id]").on("click", function () {
                var item = model._data.selectModel;
                var id = $(this).attr("data-id");
                var i = jQuery.inArray(id, item);
                console.log(model._data.price);

                if (id == 27) {
                    model._data.showMoel = true;
                    //return;
                }
                if (id == 25) {
                    model._data.showMoel2 = true;
                   // return;
                }
                if (id == 28) {
                    model._data.showMoel3 = true;
                    //return;
                }
                if (i == "-1") {
                    model._data.selectModel.push(id);
                    $(this).removeClass("icon-true1");
                    $(this).addClass("icon-true");
                    console.log(id);
                    if (id == 25)
                    {
                        
                    }
                    else if (id == 27)
                    {

                    }
                    else if (id == 28) {

                    }
                    else {
                        model.price += parseInt($(this).attr("data-price"));
                    }
                    console.log(model._data.price);
                }
                else {
                    model._data.selectModel.splice($.inArray(id, model._data.selectModel), 1);
                    $(this).removeClass("icon-true");
                    $(this).addClass("icon-true1");
                    if (id == 25) {

                        //model.price -= parseInt($(this).attr("data-price")*model._data.Num);
                    }
                    else if (id == 27) {
                        //model.price -= parseInt($(this).attr("data-price")*modal._data.area);
                    }
                    else if (id == 28) {
                        //model.price -= parseInt($(this).attr("data-price")*model._data.Num2);
                    }
                    else {
                        model.price -= parseInt($(this).attr("data-price"));
                    }
                    console.log(model._data.price);
                }
                model._data.stringSelectModel = model._data.selectModel.toString();
            })
        })

       
    </script>
}